<template>
  <div class="tab">
      <button class="span1" :class="{red:nub===index}" v-for="(item,index) in list" :key='index' @click="click(index)">{{item}}</button>
      <div v-if="nub===0">{{list[0]}}</div>
      <div v-if="nub===1">{{list[1]}}</div>
      <div v-if="nub===2">{{list[2]}}</div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            list:['1','2','3'],
            nub:0
        }
    },
    methods:{
        click(index){
            this.nub=index
        }
    }
}
</script>

<style scoped lang='less'> 
    .tab{
        position: absolute;
        width: 500px;
        height: 50px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;

        .span1{
            margin-left: 20px;
        }
    }
    .red{
        background: #f00;
    }
    
</style>